<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function $$(id){
				return document.getElementById(id);
			}
			window.onload = function(){
				var cnv = $$("canvas");
				var cxt = cnv.getContext("2d");
		 
				cxt.fillStyle = "white";
        		cxt.translate(200,150);
        		
        		var r=100;
        		
        		cxt.beginPath();
       			cxt.arc(0,0,r,2,getRad(360),true);
        		cxt.fillStyle="red";
        		cxt.closePath();
        		cxt.fill();
        		
        		cxt.beginPath();
        		cxt.arc(0,0,r,getRad(90),getRad(270),true);
        		cxt.fillStyle="black";
        		cxt.closePath();
        		cxt.fill();
        		
        		cxt.beginPath();
		        cxt.arc(0,0,r,getRad(270),getRad(90),true);
		        cxt.fillStyle="red";
		        cxt.closePath();
		        cxt.fill();
		
		        cxt.beginPath();
		        cxt.arc(0,-r/2,r/2,getRad(90),getRad(270),true);
		        cxt.fillStyle="red";
		        cxt.closePath();
		        cxt.fill();
		
		        cxt.beginPath();
		        cxt.arc(0,r/2,r/2,getRad(270),getRad(90),true);
		        cxt.fillStyle="black";
		        cxt.closePath();
		        cxt.fill();
		
		        cxt.beginPath();
		        cxt.arc(0,-r/2,r/8,getRad(0),getRad(360),true);
		        cxt.fillStyle="black";
		        cxt.closePath();
		        cxt.fill();
		
		        cxt.beginPath();
		        cxt.arc(0,r/2,r/8,getRad(0),getRad(360),true);
		        cxt.fillStyle="red";
		        cxt.closePath();
		        cxt.fill();
		    }
		
		    function getRad(degree){
		        return degree/180*Math.PI;
		    }
			
    </script>
  </head>
  <body>
    <canvas id="canvas" width="500" height="300" style="border:1px dashed gray;"></canvas>
  </body>
</html>